<template>
  <div>
    <div id="components-form-demo-advanced-search" v-if="port != 'client'">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.applyCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          客户编号：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehouseId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            接收时间：<a-range-picker
              v-model="acTime"
              @change="onStartDateChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          结算时间：<a-range-picker
            :disabled="tabKey != '56'"
            v-model="settlementTime"
            @change="onSettlementTimeChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div id="components-form-demo-advanced-search" v-if="port === 'client'">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.applyCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehouseId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in clientWareHouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          接收时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            结算时间：<a-range-picker
              :disabled="tabKey != '56'"
              v-model="settlementTime"
              @change="onStartDateChange"
              style="width: 60%"
            />
          </div>
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6"> </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <!-- 表格 -->
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="126" @change="callback">
        <a-tab-pane key="126">
          <span slot="tab">
            <a-badge
              :count="counts ? counts[0].fpaReceive : 0"
              :offset="[15, 0]"
              >待结算
            </a-badge>
          </span>
          <a-table
            v-if="tabKey === '126'"
            :data-source="tableList"
            :pagination="false"
          >
            <!-- 退件 -->
            <a-table-column
              key="warehousingName"
              data-index="warehousingName"
              align="center"
              width="7%"
            >
              <span slot="title"> 退件仓库</span>
              <template slot-scope="text, record">
                {{ record.warehousingName }}
              </template>
            </a-table-column>
            <!-- 订单编号 -->
            <a-table-column
              key="applyCode"
              data-index="applyCode"
              align="center"
              width="8%"
            >
              <span slot="title">订单编号</span>
              <template slot-scope="text, record">
                {{ record.applyCode }}
              </template>
            </a-table-column>
            <!-- 客户编号 -->
            <a-table-column
              v-if="port != 'client'"
              key="tenantId"
              data-index="tenantId"
              align="center"
              width="8%"
            >
              <span slot="title">客户编号</span>
              <template slot-scope="text, record">
                {{ record.tenantId }}
              </template>
            </a-table-column>
            <!-- 物流信息 -->
            <a-table-column
              key="logisticsInfos"
              class="columns-tab"
              data-index="logisticsInfos"
              align="center"
              :width="port === 'client' ? '28%' : '20%'"
            >
              <div slot="title" class="columns">
                <div style="width: 25%">物流商</div>
                <div style="width: 50%">运单号</div>
                <div style="width: 25%">数量(箱)</div>
                <!-- <div style="width: 25%">FNSKU</div> -->
              </div>
              <!-- 表格 -->
              <template slot-scope="text, record">
                <ul
                  class="pto-list"
                  v-for="item in record.logisticsInfos"
                  :key="item.key"
                >
                  <li style="width: 25%">
                    {{ item.logisticsName }}
                  </li>
                  <li style="width: 50%">
                    {{ item.waybillNm }}
                  </li>
                  <li style="width: 25%">
                    {{ item.packingNumber }}
                  </li>
                </ul>
              </template>
            </a-table-column>
            <!-- 总数量 -->
            <a-table-column
              key="packingNumber"
              data-index="packingNumber"
              align="center"
              width="8%"
            >
              <span slot="title"> 总数量（个）</span>
              <template slot-scope="text, record">
                {{ record.productSumNumber }}
              </template>
            </a-table-column>
            <!-- 币种 -->
            <a-table-column
              key="currency"
              data-index="currency"
              align="center"
              width="6%"
            >
              <span slot="title">币种</span>
              <template slot-scope="text, record" class="box-sizes">
                {{ record.currency || "暂无" }}
              </template>
            </a-table-column>
            <!-- 费用 -->
            <a-table-column
              key="cost"
              data-index="cost"
              align="center"
              width="8%"
            >
              <span slot="title"> 费用</span>
              <template slot-scope="text, record" class="box-sizes">
                <span> {{ record.cost || "暂无" }} </span>
              </template>
            </a-table-column>
            <!-- 状态 -->
            <a-table-column
              key="retreatState"
              data-index="retreatState"
              align="center"
              width="8%"
            >
              <span slot="title">状态</span>
              <template slot-scope="text, record">
                <span style="color: #3eae7c">
                  {{ record.retreatState }}
                </span>
              </template>
            </a-table-column>
            <!-- 接收时间 -->
            <a-table-column
              key="updateTime"
              data-index="updateTime"
              align="center"
              width="8%"
            >
              <span slot="title">接收时间</span>
              <template slot-scope="text, record">
                {{
                  record.updateTime === null
                    ? "暂无"
                    : record.updateTime.replaceAll("T", " ")
                }}
              </template>
            </a-table-column>
            <!-- 结算时间  -->
            <a-table-column
              key="settlementTime"
              data-index="settlementTime"
              align="center"
              width="8%"
            >
              <span slot="title"> 结算时间</span>
              <template slot-scope="text, record">
                {{
                  record.settlementTime === null
                    ? "暂无"
                    : record.settlementTime.replaceAll("T", " ")
                }}
              </template>
            </a-table-column>
            <!-- //操作 -->
            <a-table-column
              key="operation"
              data-index="operation"
              title="操作"
              width="55px"
              align="center"
            >
              <template slot-scope="text, record">
                <a
                  v-if="tabKey != '56' && port != 'client'"
                  href="javascript:;"
                  style="color: #2929e0; border-bottom: 1px solid #2929e0"
                  @click="close(record)"
                  >结算</a
                >
                <a-divider
                  v-if="tabKey != '56' && port != 'client'"
                  type="vertical"
                />
                <a
                  href="javascript:;"
                  style="color: #2929e0; border-bottom: 1px solid #2929e0"
                  @click="billInfo(record)"
                  >账单详情</a
                >
              </template>
            </a-table-column>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="56">
          <span slot="tab">
            <a-badge :count="counts ? counts[0].complete : 0" :offset="[15, 0]"
              >历史数据
            </a-badge>
          </span>
          <a-table
            v-if="tabKey === '56'"
            :data-source="tableList"
            :pagination="false"
            :scroll="{ x: 1300 }"
          >
            <!-- 退件 -->
            <a-table-column
              key="warehousingName"
              data-index="warehousingName"
              align="center"
              width="7%"
            >
              <span slot="title"> 退件仓库</span>
              <template slot-scope="text, record">
                {{ record.warehousingName }}
              </template>
            </a-table-column>
            <!-- 订单编号 -->
            <a-table-column
              key="applyCode"
              data-index="applyCode"
              align="center"
              width="8%"
            >
              <span slot="title">订单编号</span>
              <template slot-scope="text, record">
                {{ record.applyCode }}
              </template>
            </a-table-column>
            <!-- 客户编号 -->
            <a-table-column
              key="tenantId"
              data-index="tenantId"
              align="center"
              width="8%"
              v-if="port != 'client'"
            >
              <span slot="title">客户编号</span>
              <template slot-scope="text, record">
                {{ record.tenantId }}
              </template>
            </a-table-column>
            <!-- 物流信息 -->
            <a-table-column
              key="logisticsInfos"
              class="columns-tab"
              data-index="logisticsInfos"
              align="center"
              :width="port === 'client' ? '28%' : '20%'"
            >
              <div slot="title" class="columns">
                <div style="width: 25%">物流商</div>
                <div style="width: 50%">运单号</div>
                <div style="width: 25%">数量(箱)</div>
                <!-- <div style="width: 25%">FNSKU</div> -->
              </div>
              <!-- 表格 -->
              <template slot-scope="text, record">
                <ul
                  class="pto-list"
                  v-for="item in record.logisticsInfos"
                  :key="item.key"
                >
                  <li style="width: 25%">
                    {{ item.logisticsName }}
                  </li>
                  <li style="width: 50%">
                    {{ item.waybillNm }}
                  </li>
                  <li style="width: 25%">
                    {{ item.packingNumber }}
                  </li>
                </ul>
              </template>
            </a-table-column>
            <!-- 总数量 -->
            <a-table-column
              key="packingNumber"
              data-index="packingNumber"
              align="center"
              width="8%"
            >
              <span slot="title"> 总数量（个）</span>
              <template slot-scope="text, record">
                {{ record.productSumNumber }}
              </template>
            </a-table-column>
            <!-- 币种 -->
            <a-table-column
              key="currency"
              data-index="currency"
              align="center"
              width="6%"
            >
              <span slot="title">币种</span>
              <template slot-scope="text, record" class="box-sizes">
                {{ record.currency || "暂无" }}
              </template>
            </a-table-column>
            <!-- 费用 -->
            <a-table-column
              key="cost"
              data-index="cost"
              align="center"
              width="8%"
            >
              <span slot="title"> 费用</span>
              <template slot-scope="text, record" class="box-sizes">
                <span> {{ record.cost || "暂无" }} </span>
              </template>
            </a-table-column>
            <!-- 状态 -->
            <a-table-column
              key="retreatState"
              data-index="retreatState"
              align="center"
              width="8%"
            >
              <span slot="title">状态</span>
              <template slot-scope="text, record">
                <span style="color: #3eae7c">
                  {{ record.retreatState }}
                </span>
              </template>
            </a-table-column>
            <!-- 接收时间 -->
            <a-table-column
              key="updateTime"
              data-index="updateTime"
              align="center"
              width="8%"
            >
              <span slot="title">接收时间</span>
              <template slot-scope="text, record">
                {{
                  record.updateTime === null
                    ? "暂无"
                    : record.updateTime.replaceAll("T", " ")
                }}
              </template>
            </a-table-column>
            <!-- 结算时间  -->
            <a-table-column
              key="settlementTime"
              data-index="settlementTime"
              align="center"
              width="8%"
            >
              <span slot="title"> 结算时间</span>
              <template slot-scope="text, record">
                {{
                  record.settlementTime === null
                    ? "暂无"
                    : record.settlementTime.replaceAll("T", " ")
                }}
              </template>
            </a-table-column>
            <!-- //操作 -->
            <a-table-column
              key="operation"
              data-index="operation"
              title="操作"
              width="55px"
              align="center"
            >
              <template slot-scope="text, record">
                <a
                  v-if="tabKey != '56' && port != 'client'"
                  href="javascript:;"
                  style="color: #2929e0; border-bottom: 1px solid #2929e0"
                  @click="close(record)"
                  >结算</a
                >
                <a-divider
                  v-if="tabKey != '56' && port != 'client'"
                  type="vertical"
                />
                <a
                  href="javascript:;"
                  style="color: #2929e0; border-bottom: 1px solid #2929e0"
                  @click="billInfo(record)"
                  >账单详情</a
                >
              </template>
            </a-table-column>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>

    <!-- 服务项信息查看 -->
    <ServiceModalReap />
  </div>
</template>

<script>
import {
  by_retreatApply_pageApply,
  by_retreatApply_settlement,
  by_retreatApply_Info,
  by_retreatApply_count,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap.vue";
import { mapState } from "vuex";
export default {
  props: ["port"],
  components: {
    ServiceModalReap,
  },
  created() {
    this.getTableList();
  },
  data() {
    return {
      //状态统计
      counts: [{ toReceive: 0 }],
      tabKey: "126",
      loading: false,
      settlementTime: null,
      total: 1,
      //表格数据
      tableList: [],
      spinning: false,
      acTime: null,
      expand: false,
      searchData: {
        current: 1,
        retreatType: 0,
        size: 10,
        retreatState: "126",
        applyCode: null,
        tenantId: null,
        warehouseId: null,
        updateStartDate: null,
        updateEndtDate: null,
        startSdate: null,
        endSdate: null,
      },
      //每一行的数据
      rowData: {},
    };
  },
  methods: {
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    callback(key) {
      this.searchData.current = 1;
      this.tabKey = key;
      this.searchData.retreatState = key;
      this.getTableList();
    },
    // 账单详情
    billInfo(record) {
      setTimeout(() => {
        if (record.retreatState === "待财务审核") {
          this.$bus.$emit("reappearance", record, 5, record.id, true);
        } else {
          this.$bus.$emit("reappearance", record, 5, record.id, false);
        }
      }, 50);
    },
    //财务结算按钮
    close(record) {
      let _this = this;
      this.$confirm({
        title: `确定要结算订单编号为${record.applyCode}的订单吗?`,
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(async () => {
              let { code, responseBody } = await by_retreatApply_Info(
                record.id
              );
              if (code === "200") {
                let { code } = await by_retreatApply_settlement(responseBody);
                if (code === "10000") {
                  _this.getTableList();
                  resolve();
                } else {
                  reject();
                }
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    //接收时间
    onStartDateChange(date, dateString) {
      this.searchData.updateStartDate = dateString[0];
      this.searchData.updateEndtDate = dateString[1];
    },
    //接收时间
    onSettlementTimeChange(date, dateString) {
      this.searchData.startSdate = dateString[0];
      this.searchData.endSdate = dateString[1];
    },
    resetSearch() {
      this.acTime = null;
      this.settlementTime = null;
      let current = this.searchData.current;
      let size = this.searchData.size;
      this.searchData = {
        current: current,
        retreatType: 0,
        size: size,
        retreatState: this.tabKey,
        applyCode: null,
        tenantId: null,
        warehouseId: null,
        startDate: null,
        endtDate: null,
        startSdate: null,
        endSdate: null,
      };
      this.getTableList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getTableList() {
      this.spinning = true;
      let { code, responseBody } = await by_retreatApply_pageApply(
        this.searchData
      );
      if (code === "200") {
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.getCountList();
        this.spinning = false;
      }
    },
    async getCountList() {
      let { code, responseBody } = await by_retreatApply_count(0);
      if (code === "200") {
        this.counts = responseBody;
      }
    },
  },
  computed: {
    ...mapState(["warehouse"]),
    ...mapState(["clientWareHouse"]),
    ...mapState(["accArray"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
.pto-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    // width: 110px;
    // flex: 1;
    border: 1px solid #ccc;
    box-sizing: border-box;
    // padding: 3px 0;
    // height: 2rem;
  }
}
.pto-lists {
  display: flex;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  li {
    // width: 110px;
    flex: 1;
    border: 1px solid #ccc;
    box-sizing: border-box;
    // padding: 3px 0;
    // line-height: 2.7rem;
  }
}
/deep/.columns-tab {
  width: 10% !important;
  .columns {
    display: flex;
    div {
      // width: 110px;
      text-align: center;
      border: 1px solid #ccc;
    }
  }
}
/deep/.columns-tabs {
  width: 10% !important;
  .columns {
    display: flex;
    div {
      // width: 110px;
      text-align: center;
      border: 1px solid #ccc;
    }
  }
}
/deep/.ant-table-header-column {
  width: 100% !important;
}
</style>